<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素遍历</title>
        <!-- 元素遍历  用于DOM树中遍历元素【理解：元素嵌套，父子级】
         chirdren()   功能：获取匹配元素集合中每个元素的子元素
         parent()     功能：获取匹配元素集合中每个元素的父元素
         
         siblings()   功能：获取匹配元素集合中每个元素的兄弟元素
         
         next()       功能：获取匹配元素集合中每个元素的下一个兄弟元素
         prev()       功能：获取匹配元素集合中每个元素的上一个兄弟元素
         
         each()       功能：遍历匹配元素的集合--遍历所有子元素
                      语法糖：each(function(index,element){
                          $(element).text(`${index}`)
                          注意：打印便利的值，不可以使用单双引号+拼接
                      })
                      index: 下标  element:元素-->
         <style>
              .container{
                  border: 1px solid #ffffaf;
                  margin: 10px;
                  padding: 10px;
              }
               .box{
                  background-color: #ffeff8;
                  margin: 10px;
                  padding: 10px;
              } 
              button{
                  margin: 10px;
              }
         </style>
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- html:  div.container  父级  6个div.box 每个# 子级
                    6个按钮
             css：  .container 添加样式  边框1px 内外边距
                    .box添加样式   背景色  内外边距10px
                    button添加样式  外边距5px-->
        <div class="container">
            <div class="box" id="box1">盒子1</div>
            <div class="box" id="box2">盒子2</div>
            <div class="box" id="box3">盒子3</div>
            <div class="box" id="box4">盒子4</div>
            <div class="box" id="box5">盒子5</div>
            <div class="box" id="box6">盒子6</div>
        </div>
        <button id="gc">获取子元素</button>
        <button id="gp">获取父元素</button>
        <button id="gs">获取兄弟元素</button>
        <button id="gn">获取下一个兄弟元素</button>
        <button id="gr">获取下一个兄弟元素</button>
        <button id="loop">遍历元素</button>
        <script>
            /* 1.点击 获取子元素 按钮 实现 .container下所有元素添加背景色*/
            $("#gc").click(function(){
                //通过 父找子 函数  添加效果
                $(".container").children().css("background","#f3edff");
            });
            /* 2.点击 获取父元素 实现.container 添加背景色 */
            $("#gp").click(function(){
                $("#box2").parent().css("background-color","#d8ffff");
            });
            /* 3.点击 获取兄弟元素 按钮 实现除了#box4 字体颜色不变，其他变色 */
            $("#gs").click(function(){
                $("#box4").siblings().css("color","#e5e1ff");
            });
            /* 4.点击 获取下一个兄弟元素 按钮 实现#box4下一个兄弟，添加背景色 */
            $("#gn").click(function(){
                $("#box4").next().css("background-color","#e5e1ff");
            });
            /* 5.点击 获取上一个兄弟元素 按钮 实现.box6 上一个兄弟，添加效果
                                                圆 背景图 背景色 盒子阴影*/
             $("#gr").click(function(){
                $("#box6").prev().css({"box-shadow":"0 0 8px 0 #ffe26b",
                                       "background-color":"#ffe1f9",
                                           "background-image":"url(../img/2.gif)",
                                           "width":"300px",
                                        "height":"300px",
                                       "border-radius":"50%",
                                       "background-size":"100% 100%",
                                       "font-size":"0"
                                        });
            });        
                                        
            /* 6.点击 遍历元素 按钮 实现每个盒子上 这是第几个盒子 */
            $("#loop").click(function(){
                //通过.box 抓到6个元素【一组集合】
                $(".box").each(function(i,e){ //e代表元素  i代表下标
                    //每个盒子上加文字 这是第几个盒子
                    $(e).text(`这是第${i+1}盒子`);
                });
            });
        </script>
    </body>
</html>